<template>
  <div class="goods-sum-box">
    <div>
      总体积<span class="value-color">
        {{ summaries.totalVolume || 0 }}方</span>
    </div>，
    <div>
      总重量<span class="value-color">
        {{ summaries.totalWeight || 0 }}公斤</span>
    </div>，
    <div>
      总数量<span class="value-color">
        {{ summaries.totalQuantity || 0 }}件</span>
    </div>，
    <div>
      总物品价值<span class="value-color">
        {{ summaries.totalValue || 0 }}元</span>
    </div>，
    <div>
      总运费<span class="value-color">
        {{ summaries.totalFee || 0 }}元</span>
    </div>，
    <div>
      {{collectLabel}}<span class="value-color">
        {{ summaries.totalPendingFee || 0 }}元</span>
    </div>，
    <div>
      {{payLabel}}<span class="value-color">
        {{ summaries.totalProcessedFee || 0 }}元</span>
    </div>，
    <div>
      预付款<span class="value-color">
        {{ summaries.totalPrepayFee || 0 }}元</span>
    </div>，
    <div>
      货到付款<span class="value-color">
        {{ summaries.totalArrivePayFee || 0 }}元</span>
    </div>，
    <div>
      代收货款<span class="value-color">
        {{ summaries.totalCollectionFee || 0 }}元</span>
    </div>，
    <div>
      回执付款<span class="value-color">
        {{ summaries.totalReceiptFee || 0 }}元</span>
    </div>
  </div>
</template>

<script>
import { finance } from '@/api'

export default {
  name: "WaybillSummaries",
  props: {
    filter: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data () {
    return {
      summaries: {}
    }
  },
  computed: {
    // getLabel () {
    //   return type => {
    //     const { waybillType } = this.filter
    //     if (waybillType && waybillType[0] === type) {
    //       return type === 10 ? '已收款' : '已付款'
    //     } else {
    //       return type === 10 ? '待收款' : '待付款'
    //     }
    //   }
    // },
    collectLabel () {
      // return this.getLabel(10)
      let label = null
      const { waybillType } = this.filter
      if (waybillType) {
        if (waybillType[0] === 10) {
          label = `待收款`
        } else {
          label = `待付款`
        }
      }
      return label
    },
    payLabel () {
      // return this.getLabel(20)
      let label = null
      const { waybillType } = this.filter
      if (waybillType) {
        if (waybillType[0] === 10) {
          label = `已收款`
        } else {
          label = `已付款`
        }
      }
      return label
    }
  },
  watch: {
    filter: {
      deep: true,
      immediate: true,
      handler (value) {
        if (value?.page) {
          this.loadSummaries();
        }
      }
    }
  },
  methods: {
    async loadSummaries () {
      const response = await finance.getListTotal(this.filter);
      if (0 !== response?.code) {
        console.log("获取财务统计数据失败", response)
        return
      }
      this.summaries = response?.data || {};
    }
  }
};
</script>

<style scoped>
.goods-sum-box {
  display: flex;
  flex-flow: row wrap;
  padding-top: 20px;
  line-height: 30px;
  color: var(--prev-color-text-ashes);
  padding-right: 80px;
}
.value-color {
  color: var(--prev-color-primary) !important;
}
</style>
